<template>
  <div style="position: relative">
    <el-tabs @tab-click="handleClick" v-model="activeName">
      <el-tab-pane :lazy="true" v-for="item in orderMenuList" :key="item.id" :label="item.name" :name="item.name">
        <component :is="item.webUrl" :routesQuery="routesQuery" :panePermiss="item.children"/>
      </el-tab-pane>
    </el-tabs>
    <div class="order_box">
      <el-link @click="copyOrderId" type="primary" :underline="false" style="font-size: 16px">{{
          routesQuery.orderId
        }}
      </el-link>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import OrderDetails from './orderDetails'
import LoanRecord from './loanRecord'
import {decrypt} from "@/utils/encrypt";

export default {
  // name: 'orderDetails',
  data() {
    return {
      activeName: 'details',
      orderMenuList: [],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleClick(value) {
      this.activeName = value.name
    },
    copyOrderId() {
      let input = document.createElement("input");
      input.value = this.routesQuery.orderId || ''
      document.body.appendChild(input);
      input.select()
      document.execCommand('copy')
      this.$message.success(this.$t('复制成功'))
      document.body.removeChild(input);
    },
    async getList() {
      const {permissId} = this.routesQuery
      const permissionList = this.$store.state.permissionList
      const res = permissionList.filter(father => {
        const childArr = this.permissionList.filter(child => father.id === child.parentId)
        if (childArr.length > 0) {
          father.children = childArr
        }
        return father.parentId === parseInt(permissId)
      })
      this.orderMenuList = res
      this.activeName = res[0].name
    }
  },
  components: {
    OrderDetails,
    LoanRecord
  },
  computed: {
    ...mapGetters([
      'permissionList'
    ]),
    routesQuery() {
      return JSON.parse(decrypt(this.$route.query.params))
    }
  },

}
</script>

<style lang="less" scoped>

::v-deep .el-tabs__header {
  background-color: #ffffff !important;
  margin: 0px;

}

::v-deep .el-tabs__nav-scroll {
  padding: 15px 15px 10px 15px;


}

::v-deep .el-tabs__active-bar {
  bottom: -10px;
}

.order_box {
  position: absolute;
  top: 25px;
  right: 20px;
}

</style>
